export default {
  template: `
  <div>
  <h1>dashboard 页面</h1>
        <el-row class="tac">
        <el-col :span="12">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo">
            
            <el-menu-item :index="v.cat_id+''" v-for="(v,i) in menus" :key="v.cat_id" v-if="v.children.length==0">
            <i class="el-icon-location"></i>
                    {{v.cat_name}}
            </el-menu-item>

            <el-submenu :index="item.cat_id+''" v-for="(item,index) in menus" :key="item.cat_id" v-if="item.children.length!=0"
            >
              <template slot="title" >
                <i class="el-icon-location"></i>
                <span>{{item.cat_name}}</span>
              </template>
                <el-menu-item :index="v.cat_id+''" v-for="(v,i) in item.children" :key="item.cat_id">
                    {{v.cat_name}}
                </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>

        <el-col :span="12">
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="ID"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="Name"
          label="国家"
          width="180">
        </el-table-column>
        <el-table-column
          prop="Population"
          label="人口">
        </el-table-column>
      </el-table>

      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
        </el-col>
      </el-row>
  </div>
  `,
  mounted() {
    //获取菜单
    axios.get("/menu/getmenu").then(res => {
      // console.log(res.data)
      //获取菜单的数据
      let menus = this.getMenuData(res.data.data)
      this.menus = menus
    }).catch(err => console.log(err))
    //获取城市的分页的数据
    axios.get("/city", {
      params: {
        start: this.start,
        pageSize: this.pageSize
      }
    }).then(res => {
      // console.log(res.data)
      let data = res.data
      this.total = data.total
      this.tableData = data.data
    }).catch(err => console.log(err))
  },
  methods: {
    //页码发生变化的时候
    handleCurrentChange: function (val) {
      //val => 当前的页码
      //获取城市的分页的数据
      axios.get("/city", {
        params: {
          start:(val-1)*this.pageSize,
          pageSize: this.pageSize
        }
      }).then(res => {
        // console.log(res.data)
        let data = res.data
        this.total = data.total
        this.tableData = data.data
      }).catch(err => console.log(err))
    },
    //构造菜单内容
    getMenuData(menus) {
      let first_menus = menus.filter(v => {
        return v.cat_pid === 0 //顶层菜单
      })
      // console.log(first_menus)
      first_menus.map(v => {
        v.children = []
        menus.map(value => {
          if (value.cat_pid === v.cat_id) {
            v.children.push(value)
          }
        })
      })
      // console.log(first_menus)
      return first_menus
    }
  },
  data: function () {
    return {
      //构造菜单内容
      menus: [],
      pageSize: 20,
      total: 0, //总数
      start: 0,
      tableData: []
    }
  }
}